import React, { useState } from 'react'; 
import './images.css'; 
import { Tabs } from 'antd'; // 从Ant Design库中引入Tabs组件
import type { TabsProps } from 'antd'; // 引入Tabs组件的类型定义
import ImageGroup from '../Sfolder/ImageGroup'; // 引入自定义的ImageGroup组件
import ImageGroup1 from './ImageGroup1'; // 引入另一个自定义的ImageGroup1组件
import Canvas from './design_center'; // 引入Canvas组件
import { Watermark } from 'antd';
// 定义ImageGroup组件的属性类型
type ImageGroupProps = {
  title: string; // 图片组的标题
  images: string[]; // 图片组的图片路径数组
};

// Images组件是一个React函数组件
const Images: React.FC = () => {
  // 设置useState钩子，activeKey用于跟踪当前激活的Tab的key
  const [activeKey, setActiveKey] = useState<string>('1');
  // onChange函数用于更新activeKey的值
  const onChange = (key: string) => setActiveKey(key);

  // createImageGroup函数用于创建ImageGroup组件的实例
  const createImageGroup = (title: string, images: string[], Component: React.ComponentType<ImageGroupProps>) => (
    <Component title={title} images={images} />
  );

  // 定义Tabs组件的items属性，每个item代表一个Tab页
  const items: TabsProps['items'] = [
    {
      key: '1', // Tab的唯一标识
      label: '图库', // 显示在Tab上的文本
      children: ( // Tab页的内容
        <div className='Imgs'>
          {/* 使用createImageGroup函数创建多个ImageGroup组件 */}
          {createImageGroup('自然风景', ["../src/assets/imgscer/xiangri.jpg", "../src/assets/imgscer/lvyepg.jpg"], ImageGroup)}
          {createImageGroup('餐饮美食', ["../src/assets/imgscer/coco.jpg", "../src/assets/imgscer/ningmeng.jpg"], ImageGroup)}
          {createImageGroup('建筑空间', ["../src/assets/imgscer/lou.jpg", "../src/assets/imgscer/ta.jpg"], ImageGroup1)}
          {createImageGroup('人物形象', ["../src/assets/imgscer/xiangri.jpg", "../src/assets/imgscer/lvyepg.jpg"], ImageGroup1)}
          {createImageGroup('生活方式', ["../src/assets/imgscer/coco.jpg", "../src/assets/imgscer/ningmeng.jpg"], ImageGroup)}
          {createImageGroup('商务办公', ["../src/assets/imgscer/lou.jpg", "../src/assets/imgscer/ta.jpg"], ImageGroup)}
          {createImageGroup('教育文化', ["../src/assets/imgscer/xiangri.jpg", "../src/assets/imgscer/lvyepg.jpg"], ImageGroup1)}
          <Canvas /> {/* 渲染Canvas组件 */}
        </div>
      ),
    },
    {
      key: '2',
      label: '最近使用',
      children: <div>Content of Tab Pane 2</div>, // 第二个Tab页的内容
    },
    {
      key: '3',
      label: '收藏',
      children: <div>Content of Tab Pane 3</div>, // 第三个Tab页的内容
    },
  ];

  // 返回一个React元素，包含整个组件的结构
  return (
    <div>
      <div className='Left_search'>
        <i className='iconfont icon-Magnifier'></i> {/* 图标 */}
        <input type="text" placeholder='搜索图片' /> {/* 输入框 */}
      </div>
      {/* 渲染Ant Design的Tabs组件 */}
      <Tabs defaultActiveKey="1" items={items} activeKey={activeKey} onChange={onChange} className='Left_tabs' />
      {/* Canvas组件的容器 */}
      <div className='CanvasContainer'>
        <Canvas>
          <Watermark
    height={30}
    width={130}
    image="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*lkAoRbywo0oAAAAAAAAAAAAADrJ8AQ/original"
  ></Watermark>
        </Canvas>
      </div>
    </div>
  );
}

// 导出Images组件，使其可以在其他文件中被导入和使用
export default Images;
